/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, { useRef, useEffect, useState } from 'react';
import { View, TouchableOpacity, Text, Image, ActivityIndicator } from 'react-native';
import styles from './styles';
import { GifControllerView } from 'react-native-gif-controller-view';
import SoundPlay from './soundplay';
import { store } from '../../store/store'; 
const VideoPlayer = ({ text, isPlaying }) => {
  const gifRef = useRef(null);
  const [gifSource, setGifSource] = useState(null);
  const [height, setHeight] = useState(200);
  const [isAnimating, setIsAnimating] = useState(false);
  const [play, setPlay] = useState(isPlaying);
  const AsyncChildComponent = React.lazy(() => import('./AsyncChildComponent'));

  useEffect(() => {
    if (!text) {return;}

    const source = `${text}.gif`;
    setGifSource(source);

     

    // Get the GIF dimensions only when the source changes
    Image.getSize(source, (width, imgHeight) => {
      const newHeight = (imgHeight / width) * 200; // Maintain aspect ratio
      setHeight(newHeight);
    });

    return () => {
      if (gifRef.current) {
        gifRef.current.isAnimating = false;
        gifRef.current.source = gifSource;
        setIsAnimating(false);
        setPlay(false);
      }
    };
  }, [text]);

  useEffect(() => {
    setPlay(isPlaying);
  }, [isPlaying]);

  if (!gifSource) {
    return (
      <View style={{ position: 'absolute', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {store.getState().rootReducer.IsloadingReducer.isLoadingStatus === 'false' ? (
          <View style={styles.loading}>
            <ActivityIndicator size="large" color="#0000ff" style={{ alignSelf: 'center', top: 70 }} />
            <Text style={{ alignSelf: 'center' }}>加载中...</Text>
          </View>
        ) : null}
      </View>
    );
  } else { console.log('changed!!!!!!');}

  const playGif = () => {
    gifRef.current?.seekTo(0);
    setIsAnimating(true);
    setPlay(true);
  };

  const togglePlayPause = () => {
    setPlay(!play);
  };

  return (
    <View style={{ top: 80 }}>
      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <View style={styles.vcontainer}>
          <TouchableOpacity
            onPress={playGif}
            style={{
              height: 200,
              borderColor: '#82a8a4',
              borderWidth: 5,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#eeeeee',
           
            }}
          >
              <GifControllerView
                source={{ uri: gifSource }}
                style={{
                  justifyContent: 'center',
                  resizeMode: 'cover',
                  alignItems: 'center',
                  width: 200,
                  height: height,
                }}
                isAnimating={isAnimating}
                isReverse={false}
                speed={1}
                ref={gifRef}
              />

          </TouchableOpacity>
          <SoundPlay text={`${text}.mp3`} isPlaying={play} />
        </View>
      </View>

      <TouchableOpacity onPress={togglePlayPause} style={{ marginTop: 200 }}>
        <Image source={require('../../src/image/UI/play_audio.png')} style={{ width: 60, height: 60, resizeMode: 'stretch' }} />
      </TouchableOpacity>
    </View>
  );
};

export default VideoPlayer;
